<script setup>
import { ref, onMounted, computed, watch } from "vue";
import { reactive } from "vue";
import { ArrowLeftBold, DocumentAdd } from "@element-plus/icons-vue";
import { regionData } from "../../../cityData.js";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import { ElMessage } from "element-plus";

import { useI18n } from "vue-i18n";
const I18n = useI18n();
const { locale } = useI18n();

const router = useRouter();
const route = useRoute();
const cartId = ref(route.query.cartId);
const oNew = ref(route.query.new);

const jumpTo = (path) => {
  router.push(path);
};

const newAddress = ref({
  address: { province: "", city: "", district: "", city_id: 0 },
  detail: "",
  id: 0,
  is_default: 0,
  phone: "",
  real_name: "",
});

const form = reactive({
  address: { province: "", city: "", district: "", city_id: 0 },
  detail: "",
  id: 0,
  is_default: 0,
  phone: "",
  real_name: "",
});

const collectionProductList = ref([]);
const getCollectionProductList = async () => {
  try {
    const res = await axios.get(`${apiUrl}/collect/user?page=1&limit=100`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      collectionProductList.value = res.data.data.list;
    }
  } catch (e) {}
};

const inCollection = (product) => {
  for (let i = 0; i < collectionProductList.value.length; i++) {
    const element = collectionProductList.value[i];
    if (element.product_id === product.id) {
      return true;
    }
  }
  return false;
};

const addCollection = async (product) => {
  try {
    const res = await axios.post(
      `${apiUrl}/collect/add`,
      { id: product.id, product: "product" },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );
    getCollectionProductList();
  } catch (e) {}
};

const delCollection = async (product) => {
  try {
    const res = await axios.post(
      `${apiUrl}/collect/del`,
      { id: product.id, product: "product" },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );
    getCollectionProductList();
  } catch (e) {}
};

const addresses = ref([]);
const getAddressList = async () => {
  try {
    const res = await axios.get(`${apiUrl}/address/list?page=1&limit=200`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      addresses.value = res.data.data;
    }
  } catch (e) {}
};

const selectedAddress = computed(() =>
  addresses.value.find((item) => item.is_default)
);

const coupons = ref([]);
const getCouponList = async () => {
  try {
    const res = await axios.get(
      `${apiUrl}/coupons/order/${totalPrice()}?cartId=${
        cartId.value
      }&new=${oNew.value}&shippingType=1`,
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    if (res.data.status === 200) {
      coupons.value = res.data.data;
    }
  } catch (e) {}
};

const likeList = ref([]);
const getLikeProductList = async () => {
  try {
    const res = await axios.get(`${apiUrl}/pc/get_good_product`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      if (res.data.data.list) likeList.value = res.data.data.list;
    }
  } catch (e) {}
};

// 选择优惠券
const selCoupons = (index) => {
  if (!coupons.value[index].sel) {
    coupons.value.forEach((item) => (item.sel = false));
  }
  coupons.value[index].sel = !coupons.value[index].sel;
};

// 返回
const back = () => {
  router.back();
};

const options = regionData;
const selectedOptions = ref([]);

// 是否显示添加
let showDrawer = ref(false);

// 添加地址
const addAddress = () => {
  selectedOptions.value = [];
  Object.assign(form, newAddress.value);
  showDrawer.value = true;
};

// 修改省市区
const handleChange = (val) => {
  const provinceCode = val[0];
  const cityCode = val[1];
  const districtCode = val[2];
  form.address.city_id = parseInt(districtCode);
  
  // 查找省份
  const province = options.find((item) => item.value === provinceCode);
  if (province) {
    form.address.province = province.label;
    
    // 查找城市
    if (province.children) {
      const city = province.children.find((item) => item.value === cityCode);
      if (city) {
        form.address.city = city.label;
        
        // 查找区县
        if (city.children) {
          const district = city.children.find((item) => item.value === districtCode);
          if (district) {
            form.address.district = district.label;
          }
        }
      }
    }
  }
};

const cart = ref(null);
const getCartDetail = async () => {
  try {
    const res = await axios.post(
      `${apiUrl}/order/confirm`,
      {
        cartId: cartId.value,
        new: oNew.value,
        addressId: selectedAddress.value ? selectedAddress.value.id : 0,
        shipping_type: 1,
      },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    if (res.data.status === 200) {
      cart.value = res.data.data;
      const postage = parseFloat(res.data.data.priceGroup?.storePostage || 0);
      const discount = parseFloat(
        res.data.data.priceGroup?.storePostageDiscount || 0
      );
      shippingPrice.value = Number((postage + discount).toFixed(2));
    }
  } catch (e) {}
};

const shippingPrice = ref(0);
const getShippingPrice = async () => {
  try {
    const res = await axios.post(
      `${apiUrl}/order/check_shipping`,
      { cartId: cartId.value, new: oNew.value },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );

    if (res.data.status === 200) {
      if (res.data.data.type === 0) {
        shippingPrice.value = 0;
      }
    }
  } catch (e) {}
};

const totalProduct = () => {
  let total = 0;
  cart.value.cartInfo.forEach((item) => {
    total += item.cart_num;
  });
  return total.toFixed(2);
};

const goodsTotalPrice = () => {
  let total = 0;
  cart.value.cartInfo.forEach((item) => {
    total += item.truePrice * item.cart_num;
  });
  const coupon = coupons.value.filter((item) => item.sel);
  if (coupon.length > 0) {
    total = total - coupon[0].coupon_price;
  }
  return total;
};

const totalPrice = () => {
  const shipping = Number(shippingPrice.value || 0);
  return goodsTotalPrice() + shipping;
};

const discountPrice = () => {
  let total = 0;

  const coupon = coupons.value.filter((item) => item.sel);
  if (coupon.length > 0) {
    total = coupon[0].coupon_price;
  }
  return total;
};

const saveAddress = async () => {
  if (form.real_name === "") {
    ElMessage({
      message: "请输入姓名",
      type: "warning",
    });
    return;
  }
  if (form.phone === "") {
    ElMessage({
      message: "请输入联系电话",
      type: "warning",
    });
    return;
  }
  if (form.address.city_id === 0) {
    ElMessage({
      message: "请选择地区",
      type: "warning",
    });
    return;
  }
  if (form.detail === "") {
    ElMessage({
      message: "请输入详细地址",
      type: "warning",
    });
    return;
  }
  try {
    const res = await axios.post(`${apiUrl}/address/edit`, form, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      showDrawer.value = false;
      getAddressList();
    } else {
      ElMessage({
        message: res.data.msg,
        type: "warning",
      });
    }
  } catch (e) {}
};

// 根据 city_id 查找对应的省市区代码
const findCodesByCityId = (cityId, data = options, path = []) => {
  for (const item of data) {
    const currentPath = [...path, item.value];
    
    // 如果找到匹配的区县代码
    if (item.value === cityId.toString()) {
      return currentPath;
    }
    
    // 递归查找子级
    if (item.children && item.children.length > 0) {
      const result = findCodesByCityId(cityId, item.children, currentPath);
      if (result) {
        return result;
      }
    }
  }
  return null;
};

const editAddress = (address) => {
  const codes = findCodesByCityId(address.city_id);
  if (codes && codes.length >= 3) {
    selectedOptions.value = codes;
  } else {
    // 如果找不到，尝试根据名称查找
    selectedOptions.value = [];
  }

  form.address = {
    province: address.province,
    city: address.city,
    district: address.district,
    city_id: address.city_id,
  };
  form.id = address.id;
  form.detail = address.detail;
  form.is_default = address.is_default;
  form.phone = address.phone;
  form.real_name = address.real_name;
  showDrawer.value = true;
};

const deleteAddress = async (address) => {
  try {
    const res = await axios.post(
      `${apiUrl}/address/del`,
      { id: address.id },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );
    getAddressList();
  } catch (e) {}
};

const setDefault = async (index) => {
  addresses.value.forEach((item) => (item.is_default = 0));
  addresses.value[index].is_default = 1;
};

const refreshPriceByAddress = () => {
  getCartDetail();
};

watch(
  () => selectedAddress.value && selectedAddress.value.id,
  (newVal, oldVal) => {
    if (newVal && newVal !== oldVal) {
      refreshPriceByAddress();
    }
  }
);

const isSubmitDisabled = computed(() => {
  const total = Number(cart.value?.priceGroup?.totalPrice ?? 0);
  return total === 0;
});

// 取消
const cancelClick = () => {
  showDrawer.value = false;
};

const submitData = ref({
  addressId: 0,
  advanceId: 0,
  bargainId: 0,
  combinationId: 0,
  couponId: 0,
  custom_form: [],
  discountId: null,
  formId: "",
  from: "pc",
  invoice_id: "",
  mark: "",
  new: 0,
  phone: "15864213122",
  pinkId: 0,
  quitUrl:
    "https://pengbu.89baba.com/pages/goods/order_pay_status/index?&type=3&totalPrice=",
  real_name: "",
  seckill_id: 0,
  shipping_type: 1,
  useIntegral: false,
});

const is8Chars = (str) => {
  return /^.{8}$/.test(str);
};

const extractOrderId = (payload) => {
  if (!payload && payload !== 0) {
    return null;
  }
  if (typeof payload === "string" || typeof payload === "number") {
    return payload;
  }
  return (
    payload.orderId ||
    payload.order_id ||
    payload.order?.orderId ||
    payload.order?.order_id ||
    payload.result?.orderId ||
    payload.result?.order_id ||
    null
  );
};

const submitOrder = async () => {
  if (isSubmitDisabled.value) {
    return;
  }
  if (!is8Chars(submitData.value.mark) && submitData.value.mark != "") {
    ElMessage({
      message: I18n.t("order.recommenderWarning"),
      type: "warning",
    });
    return;
  }

  const index = addresses.value.findIndex((item) => item.is_default);
  if (index < 0) {
    ElMessage({
      message: "请先添加收货地址",
      type: "warning",
    });
    return;
  }
  const address = addresses.value[index];

  submitData.value.addressId = address.id;
  submitData.value.phone = address.phone;
  submitData.value.real_name = address.real_name;

  submitData.value.new = oNew.value;
  submitData.value.quitUrl =
    "http://pengbu.89baba.com/pages/goods/order_pay_status/index?&type=3&totalPrice=" +
    totalPrice();

  const coupon = coupons.value.filter((item) => item.sel);
  if (coupon.length > 0) {
    submitData.value.couponId = coupon[0].id;
  }

  try {
    const res = await axios.post(
      `${apiUrl}/order/create/` + cart.value.orderKey,
      { ...submitData.value },
      {
        headers: {
          "Authori-zation": `Bearer ${getToken()}`,
        },
      }
    );
    if (res?.data?.status !== 200) {
      ElMessage({
        message: res?.data?.msg || "订单提交失败",
        type: "error",
      });
      return;
    }
    const orderId = extractOrderId(res?.data?.data);
    ElMessage({
      message: "订单提交成功",
      type: "success",
    });
    if (orderId) {
      jumpTo(`/payOrder?id=${orderId}`);
    } else {
      jumpTo("/person?tab=order");
    }
  } catch (e) {}
};

onMounted(async () => {
  await getAddressList();
  await getCartDetail();
  await getShippingPrice();
  await getCouponList();
  await getLikeProductList();
});
</script>

<template>
  <div class="middle">
    <div class="backBox" @click="back">
      <el-icon class="icon"><ArrowLeftBold /></el-icon> {{ $t("order.back") }}
    </div>

    <!-- 地址管理 -->
    <div class="title">{{ $t("order.addressTitle") }}</div>
    <div class="addressContainer">
      <el-row :gutter="20" style="width: 100%">
        <el-col :span="6" v-for="(address, index) in addresses" :key="index">
          <div
            class="addressCard"
            :class="{ default: address.is_default }"
            @click="setDefault(index)"
            @dblclick.stop="editAddress(address)"
          >
            <div class="name">{{ address.real_name }}</div>
            <div class="phone">{{ address.phone }}</div>
            <div class="address">
              {{ address.province }}{{ address.city }}{{ address.district
              }}{{ address.detail }}
            </div>
            <span v-if="address.is_default" class="defaultTag">{{
              $t("order.use")
            }}</span>
            <div style="position: absolute; top: 55px; right: 10px">
              <el-icon :size="14" @click.stop="editAddress(address)"><Edit /></el-icon
              ><el-icon
                :size="14"
                style="margin-left: 10px"
                @click.stop="deleteAddress(address)"
                ><Delete
              /></el-icon>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="addNewCard" @click="addAddress">
            <el-icon :size="25" style="margin-top: 30px"><DocumentAdd /></el-icon>
            <div>{{ $t("order.addAddress") }}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="border"></div>

    <!-- 优惠券选择 -->
    <div class="title">{{ $t("order.canuse") }}</div>
    <div class="coupon">
      <el-row :gutter="20" style="width: 100%">
        <el-col
          :span="4"
          v-for="(coupon, index) in coupons"
          :key="coupon.id"
          style="margin-bottom: 20px"
        >
          <div class="item" @click="selCoupons(index)" :class="{ active: coupon.sel }">
            {{ coupon.coupon_title }} 满{{ coupon.use_min_price }}减{{
              coupon.coupon_price
            }}
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="border"></div>
    <div class="title">{{ $t("order.leaveMessage") }}</div>
    <el-input
      v-model="submitData.remark"
      type="textarea"
      style="width: 100%; margin-bottom: 50px"
      :rows="8"
      :placeholder="$t('order.leaveMessagePlace')"
    />
    <div class="title">{{ $t("order.guessYouLike") }}</div>
    <div class="productList" v-if="likeList.length > 0" style="margin-bottom: 30px">
      <div
        class="item"
        v-for="item in likeList"
        :key="item.id"
        @click="jumpTo('/productDetail?id=' + item.id)"
      >
        <div class="promotionInfo" v-if="item.promotion">
          {{ $t("productList.promotion") }}{{ item.promotion }}%
        </div>
        <div class="coverBox">
          <img :src="item.image" alt="" />
        </div>
        <div class="productInfo">
          <div class="name">
            {{ locale === "zh-cn" ? item.store_name : item.en_store_name }}
          </div>
          <!-- <div class="price">￥{{ item.price }}/{{ $t("productList.unit") }}</div> -->
           <div class="price">￥{{ item.price }}</div>
        </div>

        <div class="btnBox" v-if="locale === 'zh-cn'">
          <div
            class="btn"
            :class="{ isIn: item.isInCar }"
            @click.stop="jumpTo('/productDetail?id=' + item.id)"
          >
            <el-icon :size="20"><ShoppingCart /></el-icon>
          </div>
          <div
            class="btn"
            :class="{ isIn: inCollection(item) }"
            @click.stop="
              isLogined() &&
                (inCollection(item) ? delCollection(item) : addCollection(item))
            "
          >
            <el-icon :size="20"><CollectionTag /></el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="orderBox" v-if="cart !== null">
    <div class="middle">
      <div class="leftBox">
        <div class="title">{{ $t("order.bottomTitle") }}</div>
        <el-scrollbar style="height: 120px">
          <div class="productInfo" v-for="(item, index) in cart.cartInfo" :key="index">
            <div class="coverBox">
              <img :src="item.productInfo.image" alt="" />
            </div>
            <div class="nameBox">
              <div class="name">{{ item.productInfo.store_name }}</div>
              <div class="info">
                {{ $t("order.color") }}：{{ item.productInfo.attrInfo.suk }}
              </div>
            </div>

            <div class="priceBox">
              <div class="price">￥{{ item.truePrice }}</div>
              <div class="num" style="white-space: nowrap; position: relative; top: -3px;">
                {{ $t("order.num") }}：{{ item.cart_num }}
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="rightBox">
        <!-- <div class="title">{{ $t("order.helpTile") }}</div>
        <div class="desc1">{{ $t("order.helpDesc") }}</div>
        <div class="desc2">{{ $t("order.helpTile") }}</div>
        <div class="desc3">
          <a>{{ $t("order.link") }}</a
          >{{ $t("order.helpDesc2") }}
        </div> -->
        <div class="orderInfo" style="margin-top: 78px;">
          <div class="item">
            <div class="label">{{ totalProduct() }}{{ $t("order.count") }}：</div>
            <div class="value">￥{{ goodsTotalPrice() }}</div>
          </div>
          <div class="item">
            <div class="label">{{ $t("order.freight") }}：</div>
            <div class="value">￥{{ shippingPrice }}</div>
          </div>
          <div class="item">
            <div class="label">{{ $t("order.amount") }}：</div>
            <div class="value">￥{{ totalPrice() }}</div>
          </div>
          <div class="item">
            <div class="label">{{ $t("order.coupon") }}：</div>
            <div class="value">-{{ " " }}{{ discountPrice() }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="bottomBox">
      <div class="orderInfo leftOrderInfo">
          <div class="item">
            <div class="label">{{ $t("order.recommender") }} ID：</div>
            <div class="value">
              <el-input
                v-model="submitData.mark"
                :placeholder="$t('order.recommenderPlace')"
                clearable
                class="recommendInput" style="width: 200px;"
              ></el-input>
            </div>
          </div>
        </div>

        <el-button
          type="primary"
          style="width: 245px; margin-top: 30px; margin-bottom: 30px"
          :disabled="isSubmitDisabled"
          :class="{ disabledBtn: isSubmitDisabled }"
          @click="submitOrder()"
          >{{ $t("order.submitOrder") }}</el-button
        >
    </div>
  </div>

  <el-drawer v-model="showDrawer" direction="btt" :size="460">
    <template #header>
      <div class="drawTitle">{{ $t("order.addAddress") }}</div>
    </template>
    <template #default>
      <el-form :model="form" label-width="auto" class="formBox">
        <el-form-item>
          <el-input :placeholder="$t('account.address1')" v-model="form.real_name" />
        </el-form-item>
        <el-form-item>
          <el-input :placeholder="$t('account.phone')" v-model="form.phone" />
        </el-form-item>
        <el-form-item>
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            :placeholder="$t('account.address6')"
            @change="handleChange"
            style="width: 330px"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-input :placeholder="$t('account.address2')" v-model="form.detail" />
        </el-form-item>
        <el-form-item>
          <el-checkbox
            v-model="form.is_default"
            :label="$t('account.address3')"
            :true-value="1"
            :false-value="0"
            size="large"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveAddress" style="width: 100%">{{
            $t("account.address4")
          }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancelClick" style="width: 100%">{{
            $t("account.address5")
          }}</el-button>
        </el-form-item>
      </el-form>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
.bottomBox{
  width: var(--middle-width);
  margin: 0 auto;
}
.middle {
  .backBox {
    margin-top: 30px;
    margin-bottom: 20px;
    cursor: pointer;
    .icon {
      position: relative;
      top: 2px;
    }
  }
  .title {
    font-weight: bold;
    margin-bottom: 20px;
  }
  .addressContainer {
    display: flex;
    gap: 20px;
    margin-top: 20px;

    .addressCard {
      width: 100%;
      border: 1px solid #ccc;
      padding: 20px 20px;
      text-align: left;
      position: relative;
      background-color: #fff;
      cursor: pointer;
      transition: border-color 0.3s ease;
      margin-bottom: 20px;

      .name {
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 10px;
      }

      .phone {
        color: #444;
        margin-bottom: 20px;
      }

      .address {
        color: #444;
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &.default {
        border-color: black;
      }

      .defaultTag {
        position: absolute;
        top: 0;
        right: 0;
        background-color: black;
        color: white;
        font-size: 12px;
        padding: 5px 15px;
      }

      &:hover {
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
      }
    }

    .addNewCard {
      width: 100%;
      height: 129px;
      border: 1px solid #ccc;
      color: #aaa;
      text-align: center;
      padding: 10px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      background-color: #f0f0f044;
    }
  }

  .border {
    width: 100%;
    height: 1px;
    background-color: #dcdcdcb9;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .coupon {
    display: flex;

    .item {
      padding: 10px 20px;
      border: 1px solid #000;
      margin-right: 15px;
      cursor: pointer;

      &.active {
        background-color: #000;
        color: #fff;
      }
    }
  }
}

::v-deep .el-textarea__inner {
  border-radius: 0;
  box-shadow: 0 0 0 1px #0a0a0a inset;
}

.orderBox {
  background-color: #f6f6f6;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  .middle {
    display: flex;
    position: relative;

    &::after{
      content: "";
      width: 100%;
      height: 1px;
      background-color: #dcdcdc;
      position: absolute;
      right: 0;
      bottom: -45px;
    }
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-top: 30px;
      margin-bottom: 20px;
    }

    .leftBox {
      width: 55%;
      position: relative;

      &::after {
        content: "";
        width: 1px;
        height: 130px;
        background-color: #dcdcdc;
        position: absolute;
        right: 0;
        top: 90px;
      }
    }

    .rightBox {
      width: 45%;
      padding-left: 100px;

      .title {
        margin-top: 70px;
      }
    }

    .productInfo {
      display: flex;
      position: relative;
      padding-bottom: 20px;
      margin-bottom: 20px;
      width: 100%;

      .coverBox {
        width: 80px;
        height: 80px;
        margin-right: 30px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .nameBox {
        .name {
          font-weight: bold;
          margin-top: 10px;
          margin-bottom: 15px;
          max-width: 400px;
        }

        .info {
          font-size: 12px;
          color: #666;
        }
      }

      .priceBox {
        flex: 2;
        text-align: right;
        padding-right: 100px;
        color: #666;
        display: flex;
        align-items: end;
        padding-bottom: 17px;
        justify-content: end;

        .price {
          color: #000;
          margin-right: 20px;
          font-size: 16px;
        }
      }
    }

    .orderInfo {
      .item {
        display: flex;
        width: 265px;
        justify-content: space-between;
        margin-bottom: 15px;

        .value {
          font-weight: bold;
        }

        &:last-child{
          margin-bottom: 0;
        }
      }
    }


    .desc1,
    .desc2,
    .desc3 {
      line-height: 50px;
    }
  }
}

.formBox {
  width: 330px;
  margin: 0 auto;
}

.drawTitle {
  text-align: center;
}

::v-deep .el-input__inner {
  height: 40px;
}

::v-deep .el-drawer__body {
  padding-top: 0;
}

.productList {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
  .item {
    width: 325px;
    padding-bottom: 65px;
    cursor: pointer;
    transition: 0.5s all;
    position: relative;
    &:hover {
      box-shadow: 0px 0px 4px 1px #c5c5c54f;

      .promotionInfo {
        display: block;
      }

      .btnBox {
        display: flex;
      }
    }

    .coverBox {
      width: 200px;
      height: 200px;
      margin: 30px auto 20px auto;
      user-select: none;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .promotionInfo {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      padding: 5px 10px;
      background-color: #156197;
      color: #fff;
      transition: 0.5s all;
    }

    .productInfo {
      margin-top: 10px;
      .name {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        padding: 0 20px;
        box-sizing: border-box;
      }

      .price {
        font-size: 16px;
        text-align: center;
        margin-top: 10px;
      }
    }

    .btnBox {
      display: none;
      transition: 0.5s all;
      position: absolute;
      justify-content: center;
      width: 100%;
      margin-top: 10px;

      .btn {
        width: 35px;
        height: 35px;
        background-color: #fff;
        color: #000;
        border: 1px solid #000;
        border-radius: 35px;
        // line-height: 40px;
        font-size: 35px;
        display: flex;
        justify-content: center;
        align-items: center;

        &:first-child {
          margin-right: 10px;
        }

        .el-icon {
          margin: auto;
        }

        &.isIn {
          background-color: #000;
          color: #fff;
          border: 1px solid #000;
        }
      }
    }
  }
}

.recommendInput {
  height: 30px;
  margin-top: -6px;
  transition: 0.5s all;
  --el-input-focus-border: #000;
}

.disabledBtn {
  background-color: #c0c0c0 !important;
  border-color: #c0c0c0 !important;
  color: #ffffff !important;
  cursor: not-allowed;
}

.leftOrderInfo{
  .item {
    display: flex;
    width: 265px;
    justify-content: space-between;
    margin-bottom: 10px;

    .value {
      font-weight: bold;
    }
  }
}
</style>
